import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from '../store'
import hand from '@/resource/archives/hand.png'
import PageLoading from '@/components/Global/PageLoading'
import { useEffect } from 'react'
import { useParams } from 'umi'
import dayjs from 'dayjs'

export default observer(() => {
    const store = useLocalObservable(() => new Store())
    const { barriersInfo, getBarriersInfo, resetBarriers } = store
    const { id }: any = useParams()

    useEffect(() => {
        getBarriersInfo(id)
        return () => {
            resetBarriers()
        }
    }, [])

    if (!Object.keys(barriersInfo).length) {
        return <PageLoading />
    }
    console.log(barriersInfo)
    return (
        <div className={styles.container}>
            <div className={styles.header}>
                <div className={styles.header_box}>
                    <div>
                        <div className={styles.title}>{barriersInfo?.name}</div>
                        <div className={styles.tips}>最近一次编辑 {dayjs(barriersInfo?.update_time).format('YYYY-MM-DD HH:mm')}</div>
                    </div>
                </div>
            </div>
            <div className={styles.content_wrapper}>
                <img src={hand} />
                {barriersInfo?.detail?.map((item: any, idx: number) => {
                    return (
                        <div className={styles.box} key={item.id}>
                            <div className={styles.number}>{idx + 1}</div>
                            <div className={styles.right_content}>
                                <div className={styles.title}>{item.name}</div>
                                <div className={styles.reason}>{item.feature}</div>
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
})
